<script setup>
import FocusLeft from '@/layout/SubLayout/FocusLeft.vue'
import { requestConfig } from '@/config'
import { SmartMonitorApi } from '@/api/index'

const data = reactive({
  envWatchDataStatsReady: false,
  monitorStreamUrlReady: false,
})

const { data: resEnvWatchDataStats } = useRequest(SmartMonitorApi.getEnvWatchDataStats, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.envWatchDataStatsReady = true
  },
})
const formatedEnvWatchDataStats = useFormatResult(resEnvWatchDataStats, (res) => {
  const {
    noise,
    pm25,
    pm10,
    oxygenContent,
    noiseList,
    pm25List,
    pm10List,
    oxygenContentList,

  } = res?.data || {}
  return {
    envData: {
      noise,
      pm25,
      pm10,
      oxygen: oxygenContent,
    },
    watchStats: [
      {
        key: 'noise',
        label: '噪音',
        value: noise,
        unit: 'dB',
        chartData: noiseList,
      },
      {
        key: 'pm25',
        label: 'PM2.5',
        value: pm25,
        unit: 'μg/m³',
        chartData: pm25List,
      },
      {
        key: 'pm10',
        label: 'PM10',
        value: pm10,
        unit: 'μg/m³',
        chartData: pm10List,
      },
      {
        key: 'oxygen',
        label: '氧气含量',
        value: oxygenContent,
        unit: '%',
        chartData: oxygenContentList,
      },
    ],
  }
})

const { data: resMonitorStreamUrl } = useRequest(SmartMonitorApi.getMonitorStreamUrl, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.monitorStreamUrlReady = true
  },
})
console.log(resMonitorStreamUrl, 'resMonitorStreamUrl')
const {
  envWatchDataStatsReady,
  monitorStreamUrlReady,
} = toRefs(data)
</script>

<template>
  <FocusLeft>
    <template #left>
      <div style="height:100%">
        <UiPanel title=" 设备监控 " stretch title-length="n">
          <MonitorGridView :data="resMonitorStreamUrl?.data || []" :ready="monitorStreamUrlReady" />
        </UiPanel>
      </div>
    </template>
    <template #right>
      <div style="height:100%">
        <UiPanel title="环境监控" stretch>
          <EnvDataStats :env-data="formatedEnvWatchDataStats?.envData || {}" :watch-stats="formatedEnvWatchDataStats?.watchStats || []" :ready="envWatchDataStatsReady" />
        </UiPanel>
      </div>
    </template>
  </FocusLeft>
</template>

<page-meta lang="yaml">
title: 智能监控
layout: main
</page-meta>

<style lang='scss' scoped>

</style>
